import React from 'react'
import {Form,Button,Input, message} from 'antd'
import './Login.css'
// import Particles from "react-particles-js";
import Particles from 'reactparticles.js';
// import Particles from 'react-particles-js'
import axios from 'axios';
function Login(props) {
    const onFinish=(values)=>{
        console.log(values);
        axios.get("/users?username="+
        values.username+'&password='+values.password+'&roleState=true&_expand=role').then(res=>{
            console.log(res.data);
            if (res.data.length===0) {
                message.error("用户名或密码不匹配")
            }else{
                localStorage.setItem("token",JSON.stringify(res.data[0]))
                props.history.push('/')
            }
        })
    }

    return (
        
        <div style={{ background: 'rgb(35,39,65)', height: '100%' }}>
            <Particles id="test-particles" config="test-particles.json"/>
            <Form
            className='forms'
            style={{color: "white" ,background:"rgba(100,100,200,0.5)"
            
        }}
                name="basic"
                onFinish={onFinish}
            >
                <Form.Item
   
                    style={{ paddingTop: "50px",width:350,paddingLeft:50}}
                    className='fi'
                    label="Username"
                    name="username"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                    
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    style={{width:350,paddingLeft:50}}
                    label="Password"
                    name="password"
                    rules={[{ required: true, message: 'Please input your password!' }]}
                >
                    <Input.Password />
                </Form.Item>


                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

export default Login
